<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>state</title>

</head>
<body>
<div id="test"></div>
</body>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<!--将jsx转为js-->
<script src="../js/babel.min.js"></script>
<!--babel  由babel转换jsx-->
<script type="text/babel">
    //1.创建类式组件
    class Weater extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                isHot: true,
                wind: '威风'
            }
            this.changeWeather = this.changeWeather.bind(this)
        }

        changeWeather() {
            this.setState({
                isHot: !this.state.isHot
            })
        }

        render() {
            return <h1 onClick={this.changeWeather}>今天天气很{this.state.isHot ? '炎热' : '凉爽'},{this.state.wind}</h1>
        }
    }

    //2.渲染组件到页面
    ReactDOM.render(<Weater/>, document.getElementById('test'))
</script>
</html>